<template>
  <div class="comments" style="margin-bottom: 10px;">
    <div class="comments_user">
      <div style="">
        <div class="comments_user_head" :style="head"></div>
        <span>{{user.username}}</span>
      </div>
    </div>
    <div class="comments_body">
      <textarea ref="test" v-model="text" placeholder="发表评论吧~" class="comments_input"></textarea>
      <ul class="icon-body">
        <li class="dib" @click="fselect1">
          <svg class="icon" :class="select1" aria-hidden="true"><use xlink:href="#icon-dianzan"></use></svg>
          <div class="name">推荐</div>
        </li>
        <li class="dib" @click="fselect2">
          <svg class="icon" :class="select2" aria-hidden="true"><use xlink:href="#icon-buzan"></use></svg>
          <div class="name">不推荐</div>
        </li>
        <li class="dib1">
        <input class="comments_button" type="button" value="发表评测" @click="sendcomment">
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import {uploadcomments} from "../../../api/comments";
import {mainStore} from "../../../../store";
import {storeToRefs} from 'pinia'
import {getdatabyid} from "../../../api/getdata";
export default {
  props:{
    gameid:{
      type: Number
    }
  },
  data(){
    const { islogin,user } = storeToRefs(mainStore())
    return {
      text: '',
      user,
      head: '',
      select1: 'icon-select1',
      select2: '',
      comment: '推荐'
    }
  },
  created() {
    this.head = 'background-image: url('+ this.user.userheader +')'
    console.log(this.head)
  },
  watch: {
    text (nv, ov) {
      if (nv === ov) {
        return
      }
      this.currentValue = nv
      console.log('value changed')
      this.changeHeight()
    }
  },
  methods:{
    async sendcomment() {
      this.gameinfo = await new Promise(((resolve, reject) => {
        getdatabyid({id: this.gameid}).then(res => {
          resolve(res.data[0])
        })
      }))
      const params = {
        username: this.user.username,
        userid: this.user.userid,
        commentsword: this.text,
        gamename: this.gameinfo.gamename,
        gameid: this.gameid,
        comment: this.comment
      }
      uploadcomments(params)
      location.reload()
    },
    changeHeight () {
      let _this = this
      this.$nextTick(() => {
        var textArea = _this.$refs.test
        var scrollHeight = textArea.scrollHeight // 控件所有的高度，包含滚动的那部分(不可见也会有高度)
        var height = textArea.offsetHeight // 屏幕上显示的高度
        if (height <= scrollHeight) {
          textArea.style.height = '80px' // 恢复默认值，这个作用就是根据内容自适应textarea高度
          textArea.style.height = textArea.scrollHeight + 'px' // 拿到最新的高度改变textarea的高度
        }
      })
    },
    fselect1(){
      this.select1 = 'icon-select1'
      this.select2 = ''
      this.comment = '推荐'
    },
    fselect2(){
      this.select2 = 'icon-select2'
      this.select1 = ''
      this.comment = '不推荐'
    }
  }
}
</script>

<style scoped>
.icon{
  width: 30px;
  height: 50px;
  vertical-align: middle;
  float: left;
  margin-right: 10px;
}
.icon-select1{
  fill: #67bad5;
}
.icon-select2{
  fill: #cc5d60;
}
.dib{
  display: inline-block;
}
.dib1{
  float: right;
  display: inline-block;
}
.comments_button{
  float: right;
  margin-top: 20px;
  width: 100px;
  height: 40px;
  background-color: #486478;
  color: #67bad5;
  cursor: pointer;
}
.comments_button:hover{
  background-color: #5f86a1;
  color: #74d4f3;
}
.comments_input{
  width: 1130px;
  height: 80px;
  display: block;
  background-color: #222b35;
  color: white;
}
.comments_user_head{
  top: 0;
  width: 100px;
  height: 100px;
  display: inline-block;
  margin-top: 0;
  vertical-align: top;
  background-size: 100px;
}
.comments_user:hover{
  color: #c1ccc0;
}
.comments{
  width: 1500px;
  height: 100%;
  background-color: #16202d;
  color: #7d90a4;
  display: flex;
}
.comments_user,.comments_body{
  display: inline-block;
  height: 100%;
}
.comments_user{
  position: relative;
  width: 250px;
  height: 100%;
}
.comments_body{
  width: 1170px;
  padding: 20px;
}
</style>
